<template>
  <div class="start_f">
    <el-row class="box"  :gutter="20">
      <div class="map el-col el-col-24">
          <div id="map-box" class="bmap-wrapper"></div>
      </div>
      <!--   -->
      <div>
        <el-col :hidden='show_left' :span="6"  class='card_box'>
          <el-scrollbar style="height:100%;">
            <div class="" >
              <el-card id="cardfour">
                <!-- 卡片 -->
                <img class="boxleftup" :src="imgIcon.leup"/>
                <img class="boxrightup" :src="imgIcon.riup"/>
                <img class="boxleftdow" :src="imgIcon.ledow"/>
                <img class="boxrightdow" :src="imgIcon.ridow"/>
                <el-row>
                  <el-col :span="11">
                    <div class="uav_img_box">
                      <el-image class="fly_image_box" :src='uav_img'></el-image>
                    </div>
                  </el-col>
                  <el-col :span="13">
                    <div class="uav_img_box">
                      <el-row class="uav_details_box" v-for="(item,index) in uav_details_arr " :key='index'>
                        <el-col :span="13" :offset="1">
                            <div :class="item.class">{{item.name}}</div>
                          </el-col>
                          <el-col :span="10">
                            <div :class="item.class">{{item.details}}</div>
                          </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">
                      <div class="blank" style="background-color:#1d6190"></div>
                  </el-col>
                  <el-col :span="22">
                    <div class="blank"></div>
                  </el-col>
                </el-row>
                <el-row class="uav_number_box">
                  <div class="uav_number_txt">编号：{{flightObj.name}}</div>
                  <div class="uav_number_txt">厂家：{{flightObj.company}}</div>
                  <div class="uav_number_txt">型号：{{flightObj.model_name}}</div>
                  <el-col :span='24'>
                    <span class="uav_number_txt">ID: {{flightObj.uas_serial_id}}</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">
                      <div class="blank" style="background-color:#1d6190"></div>
                  </el-col>
                  <el-col :span="22">
                    <div class="blank"></div>
                  </el-col>
                </el-row>
                <div class="yibiaopan">
                  <el-row style="padding-bottom:0.05rem">
                    <el-col :span="6" style="position: relative;">
                      <div class="yibiao-left">
                        <ul class="yibiao-left-num">
                          <li v-for="(item,index) in flight_speed_list" :key='index'>{{item}}</li>
                        </ul>
                        <div class="yibiao-left-img">
                          <img  src="../../assets/imgs/yibaopan_left.png"/>
                        </div>
                      </div>
                      <span :style="fsCurrent" :class="speed_style"><span class="span-text">实时</span><span class="span_left">{{flight_speed}}</span></span>
                    </el-col>
                    <el-col :span="12">
                      <div class="flex-container">
                        <div class="flexroler">
                          <p class="turntype">滚转</p>
                          <p class="turnvalue">{{flightObj.pitch}}°</p>
                        </div>
                        <div class="flexrolef">
                          <p class="turntype">偏航:</p>
                          <p class="turnvalue_yaw">{{flightObj.yaw}}°</p>
                        </div>
                        <div class="flexrolef">
                          <p class="turntype">俯仰</p>
                          <p class="turnvalue">{{flightObj.roll}}°</p>
                        </div>
                      </div>
                      <div class="yibiaodi">
                        <img class="yibiaodiyuan"  src="../../assets/imgs/yibiao-mid-diyuan.png"/>
                        <div class="yibiaopointbox"  id="big_round">
                          <img class="yibiaopoint" src="../../assets/imgs/yibiao-mid-point.png"/>
                        </div>
                        <img class="yibianred" src="../../assets/imgs/yibiao-mid-red.png"/>
                        <div class="yibiaobox"  id="roundbox">
                          <img class="yibiaonei" id="round" src="../../assets/imgs/blue_black.png">
                          <div class="yibiaokedubox" id="round_1">
                            <img class="yibiaokedu"  src="../../assets/imgs/yibiao-mid-kedu.png"/>
                            <span class="yibiaonum">20</span><span class="yibiaonum1">10</span>
                            <span class="yibiaonum2">10</span><span class="yibiaonum3">20</span>
                            <span class="yibiaonum4">20</span><span class="yibiaonum5">10</span>
                            <span class="yibiaonum6">10</span><span class="yibiaonum7">20</span>
                          </div>
                        </div>
                      </div>

                      <div class="flex-xiao">
                        <img class="yibiaoxiaoyuan" src="../../assets/imgs/yibaopan_yuan.png"/>
                        <img class="yibiaoresfly" id="redfly" src="../../assets/imgs/red_fly.png"/>
                        <p class="turntype">偏航方向：{{flightObj.direction}}</p>
                      </div>
                    </el-col>
                    <el-col :span="6"  style="position: relative;">
                      <div class="yibiao-right">
                        <div class="yibiao-right-img">
                          <img src="../../assets/imgs/yibiaopan_right.png"/>
                        </div>
                        <ul class="yibiao-right-num">
                          <li style="color:#33cb66;" v-for="(item,index) in flight_height_list" :key='index'>{{item}}</li>
                        </ul>
                      </div>
                      <span :style="fhCurrent" :class="yibiao_style"><span class="span_right">{{flight_height}}</span><span class="span-text">实时</span></span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span='6' :offset="1">
                      <div class="yibiao-name">飞行速度 (IAS)</div>
                    </el-col>
                    <el-col :span='8' :offset="2">
                      <div class="navigation_box_lat">经度：{{flightObj.lon}}°</div>
                    </el-col>
                    <el-col :span='5' :offset="1">
                      <div class="yibiao-name">相对高度</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span='6'  :offset="1">
                      <div class="yibiao-name">
                        <span class="speed_txt">{{flight_speed}}</span>m/s
                      </div>
                    </el-col>
                    <el-col :span='8' :offset="2">
                      <div class="yibiao-name">
                        <div class="navigation_box_lat">纬度：{{flightObj.lat}}°</div>
                      </div>
                    </el-col>
                    <el-col :span='5' :offset="1">
                      <div class="yibiao-name">
                        <span class="height_txt">{{flight_height}}</span>m
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="2">
                        <div class="blank" style="background-color:#1d6190"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class="blank"></div>
                    </el-col>
                  </el-row>
                  <el-row class="margin_top_box uav_detailss_box">
                    <el-col  :span="8">
                      <div>真空速(TAS)</div>
                      <div><span class="uav_detailss_txt">{{flightObj.true_airspeed}}</span>m/s</div>
                    </el-col>
                    <el-col  :span="8">
                      <div>飞机航向角</div>
                      <div><span class="uav_detailss_txt">{{flightObj.course}}</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div>飞机海拔高度</div>
                      <div><span class="uav_detailss_txt">{{flightObj.alt}}</span>m</div>
                    </el-col>
                  </el-row>
                    <el-row class="margin_top_box uav_detailss_box">
                    <el-col  :span="8">
                      <div>风速</div>
                      <div><span class="uav_detailss_txt">{{flightObj.wind_speed}}</span>m/s</div>
                    </el-col>
                    <el-col  :span="8">
                      <div>温度</div>
                      <div><span class="uav_detailss_txt">{{flightObj.temperature}}</span>°</div>
                    </el-col>
                    <el-col :span="8">
                      <div>机下点海拔</div>
                      <div><span class="uav_detailss_txt">{{flightObj.ground_alt}}</span>m</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="2">
                        <div class="blank" style="background-color:#1d6190"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class="blank"></div>
                    </el-col>
                  </el-row>
                  <el-row class="margin_top_box uav_detailss_box">
                    <el-col  :span="8">
                      <div>剩余里程</div>
                      <div><span class="uav_detailss_txt">{{flightObj.remaining_dis}}</span>km</div>
                    </el-col>
                    <el-col  :span="8">
                      <div>剩余时间</div>
                      <div><span class="uav_detailss_txt">{{flightObj.remaining_time}}</span>min</div>
                    </el-col>
                    <el-col :span="8">
                      <div>剩余燃油/电量</div>
                      <div><span class="uav_detailss_txt">{{flightObj.remaining_oil}}</span>%</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="2">
                        <div class="blank" style="background-color:#1d6190"></div>
                    </el-col>
                    <el-col :span="22">
                      <div class="blank"></div>
                    </el-col>
                  </el-row>
                  <el-row class="margin_top_box uav_detailss_box">
                    <el-col  :span="8">
                      <div :class="power_status">
                        <div>动力系统</div>
                        <div><span class="uav_detailss_txt uav_detailss_txt_status">{{flightObj.mot_status}}</span></div>
                      </div>
                    </el-col>
                    <el-col  :span="8">
                      <div :class="gps_status">
                        <div>导航系统</div>
                        <div><span class="uav_detailss_txt uav_detailss_txt_status">{{flightObj.nav_status}}</span></div>
                      </div>
                    </el-col>
                    <el-col :span="8" >
                      <div :class="tong_status">
                        <div>通信系统</div>
                        <div><span class="uav_detailss_txt uav_detailss_txt_status">{{flightObj.com_status}}</span></div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <!-- 卡片 -->
              </el-card>
            </div>
          </el-scrollbar>
        </el-col>
      </div>

      <div>
        <el-col :span='7'    :offset="span_width" class='card_box' >
          <el-scrollbar style="height:100%;">
              <el-card>
                <!-- 卡片 -->
                <div class="control-light-layout">
                  <span>地图亮度{{mapOpacity}}%</span>
                  <img src="@/assets/imgs/plus_light.png" />
                  <el-slider v-model="mapOpacity" @change=" formatTooltip" style="width:45%;"></el-slider>
                  <img src="@/assets/imgs/add_light.png" />
                  <el-image class="control_button_img" @click="show_details()" :src='home_menu_btn'></el-image>
                </div>
                <!-- 卡片 -->
              </el-card>
               <div class="margin_top_box"></div>
               <el-card   :hidden="show_right">
                 <div class="live_txt_box">
                  <a @click="_OpenUrl(videoUrl)"><span>视频播放（点击跳转视频播放页面）</span></a>
                 </div>
                <a v-if="!useDplayer" href="http://www.adobe.com/go/getflashplayer" >
                  <LivePlayer class="live_play" :videoUrl="videoUrl"   fluent autoplay live stretch></LivePlayer>
                </a>
                <div v-if="useDplayer" id="dplayer" class="hy-player-wrapper"></div>

               </el-card>
              <div class="margin_top_box"></div>
              <div :hidden='!show_operation'>
                <div class="margin_top_box"></div>
                <el-card id="cardfour" :hidden='show_right'>
                  <img class="boxleftup" :src="imgIcon.leup"/>
                  <img class="boxrightup" :src="imgIcon.riup"/>
                  <img class="boxleftdow" :src="imgIcon.ledow"/>
                  <img class="boxrightdow" :src="imgIcon.ridow"/>
                  <!-- 卡片 -->
                  <el-row  class="operation_boxs_on">
                    <div v-for="(item,operation_list_index_one) in operation_list_arr[0]" :key='operation_list_index_one' @click="operation_way(item.url,item.name)">
                      <el-col v-if='operation_list_index_one==0'  :class="item.class" :span="6">
                        <div class='operation_txt'>
                        <el-image class="operation_txt_name" :src='item.image'></el-image>
                        <span class="operation_txt_name">{{item.name}}</span>
                        </div>
                      </el-col>
                      <el-col v-else  :class="item.class" :span="6">
                        <div class='operation_txt'>
                          <div>
                            <el-image  class="operation_img_k" :src='item.image'></el-image>
                          </div>
                          <span>{{item.name}}</span>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                    <div class="line"></div>
                  <el-row  class="operation_boxs_down">
                    <div v-for="(item,operation_list_index_one) in operation_list_arr[1]"  :key='operation_list_index_one'  @click="operation_way(item.url,item.name)">
                      <el-col v-if='operation_list_index_one==0'  :class="item.class" :span="6">
                        <div class='operation_txt'>
                        <el-image class="operation_txt_name" :src='item.image'></el-image>
                        <span class="operation_txt_name">{{item.name}}</span>
                        </div>
                      </el-col>
                      <el-col v-else  :class="item.class" :span="6">
                        <div class='operation_txt'>
                          <div>
                            <el-image v-if='operation_list_index_one==2' class="operation_img_k" :src='item.image'></el-image>
                            <el-image v-else class="operation_img" :src='item.image'></el-image>
                          </div>
                          <span>{{item.name}}</span>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                  <!-- 卡片 -->
                </el-card>
              </div>
                 <div class="margin_top_box"></div>
              <div :hidden='!show_operation'>
                <el-card :hidden='show_right'>
                  <!-- 卡片 -->
                  <div class="parameter_list_box">
                    <div class="parameter_list_title">
                      <span>指令动作</span>
                      <div>
                        <el-row class="uav_details_right_box">
                          <el-col :span="12"  >
                            <div class="uav_details_b">
                              <span class="parameter_list_txt">指令</span>
                            </div>
                          </el-col>
                          <el-col class="uav_details_b" :span="11">
                            <div>
                              <span class="parameter_list_txt">{{operation_obj.instruction}}</span>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row class="uav_details_right_box">
                          <el-col :span="12"  >
                            <div class="uav_details_w">
                              <span class="parameter_list_txt">时间</span>
                            </div>
                          </el-col>
                          <el-col class="uav_details_w" :span="11">
                            <div>
                              <span class="parameter_list_txt">{{operation_obj.time}}</span>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row class="uav_details_right_box">
                          <el-col :span="12"  >
                            <div class="uav_details_c_right_title">
                              <span class="parameter_list_txt">坐标</span>
                            </div>
                          </el-col>
                          <el-col class="uav_details_c_right" :span="11">
                            <div>
                              <span class="parameter_list_txt">lon:{{operation_obj.lon}}</span>
                            </div>
                            <div>
                              <span class="parameter_list_txt">lat:{{operation_obj.lat}}</span>
                            </div>
                            <div>
                              <span class="parameter_list_txt">alt:{{operation_obj.alt}}</span>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                  <!-- 卡片 -->
                </el-card>
              </div>
              <div class="margin_top_box"></div>
              <el-card :hidden='show_right'>
                <!-- 卡片 -->
                <div class="parameter_list_box">
                  <div class="parameter_list_title">
                    <span>参数列表</span>
                  </div>
                  <div>
                    <el-row class="uav_details_right_box" v-for="(item,parameter_index) in parameter_list_arr" :key='parameter_index'>
                      <el-col :span="11">
                        <div :class="item.class">
                          <span class="parameter_list_txt">{{item.name}}</span>
                        </div>
                      </el-col>
                      <el-col :class="item.class" :span="12">
                        <div>
                          <span class="parameter_list_txt">{{item.value}}</span>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <!-- 卡片 -->
              </el-card>
              <div class="margin_top_box"></div>
              <div  :hidden='show_operation'>
                <el-card :hidden='show_right'>
                  <el-row :gutter="24" class="tool">
                    <el-col :span="8" @click.native="stop">
                      <li class="tool-li"><img src="@/assets/imgs/stop_v.png" /></li>
                      <p class="tool-p">停止</p >
                    </el-col>
                    <el-col :span="8" v-if='!play_Bool' @click.native="speed_up" style="text-align: center;">
                      <li class="tool-li"><img src="@/assets/imgs/end_v.png"/></li>
                      <p class="tool-p">播放</p>
                    </el-col>
                    <el-col :span="8" v-if='play_Bool' @click.native="suspended" >
                      <li><img src="@/assets/imgs/start_v.png" /></li>
                      <p class="tool-p">暂停</p>
                    </el-col>
                    <el-col :span="8">
                      <li class="tool-li">
                        <el-select @change="Select_times_speed" v-model="value" placeholder="请选择">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                        </el-select>
                      </li>
                    <p class="tool-p">倍速</p >
                    </el-col>
                  </el-row>
                </el-card>
              </div>
          </el-scrollbar>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script>
import map from './map'
import { parseTime } from "@/utils/index";
import request2 from "../../utils/request-new"
import Message from '../start/message'
import LivePlayer from '@liveqing/liveplayer'
// 添加dplayer播放器
import 'dplayer/dist/DPlayer.min.css'
import DPlayer from 'dplayer'

export default {
  name: "Test",
  components: {
      Message,
      LivePlayer
  },
  mounted () {
    //初始化dp播放器
    if(this.useDplayer) this.initDplayer()

    //google地图初始化
	  var mapbox= document.getElementById('map-box')
    this.gmap = new google.maps.Map(mapbox, {
        //默认北京天安门
        center: {lng:116.46, lat:39.92},
        zoom: 5,
        //默认卫星地图
        mapTypeId: 'satellite',
        disableDefaultUI: true,
        zoomControl: false,//屏蔽掉放大缩小控件
	  });

      // 调用卫星底图
    this.gmap.mapTypes.set('local', localMapType);
	  this.gmap.setMapTypeId('local');

    this.marker = new google.maps.Marker({
      map: this.gmap,
      icon: this.SLH, //this.planeIcon['blue'],
      draggable: true,
      // position: new google.maps.LatLng(39.92,116.46),
      title: '自定义图标',
    })
    // 绘制矩形
    this.rectangle = new google.maps.Rectangle({
      draggable: false, // 是否可拖动
      editable: false, // 是否可编辑
      strokeColor: '#FF0000',
      strokeOpacity: 0,
      strokeWeight: 2,
      fillColor: '#0a1b3d',
      fillOpacity: this.mapOpacity/100,
      map: this.gmap,
      zIndex:-1,
      bounds: {
        north: -90,
        south: 90,
        east: 180,
        west: -180
      }
    });
    //添加覆盖层
    this.rectangle.setMap(this.gmap)
    // this.start_fly_path(this.coordinates_data)//测试数据
    // this.init()//测试数据
    this.fly_detail()
    const _this = this;
		google.maps.event.addListener(this.rectangle, 'click', function(e) {
			_this.getLatLng(_this.gmap, e.latLng);
		});
  },
  computed: {
    fsMin: function() { return this.flight_speed_list.slice(-1) - 5 },
    fsMax: function() { return this.flight_speed_list.slice(0,1) },
    fhMin: function() { return this.flight_height_list.slice(-1) - 100 },
    fhMax: function() { return this.flight_height_list.slice(0,1) },
    fsCurrent: function() {
      //飞行速度 实时 框的位置
      var percent = (this.flight_speed - this.fsMin) / (this.fsMax - this.fsMin)
      if(percent<0 || percent>1) percent = percent<0 ? 0 : 1
      return {
        'bottom': 'calc((100% - 0px) * '+percent+' - 0px)' //距底部位置
      }
    },
    fhCurrent: function() {
      //相对高度 实时 框的位置
      var percent = (this.flight_height - this.fhMin) / (this.fhMax - this.fhMin)
      if(percent<0 || percent>1) percent = percent<0 ? 0 : 1
      return {
        'bottom': 'calc((100% - 10px) * '+percent+' - 1px)' //距底部位置
      }
    },
  },
  created(){},
  data() {
    return {
      dp: null,
      useDplayer: false,
      videoUrl: '',
      videoStatus:0,
      videoImg:'./poster.png',//直播封面图
      show_left:true,
      show_right:true,
      show_operation:true,//显示操作组按钮
      play_Bool:false,//控制暂停和播放
      Timing:0,//存储回放时间
      Times_speed:1,//控制倍速
      storage_play:0,//存储下标i
      options:[//倍速数组
				{
					value: '1',
					label: 'x1'
				},
				{
					value: '2',
					label: 'x2'
				},
				{
					value: '40',
					label: 'x4'
				},
			],
			value:'1',//倍速默认值
      mapOpacity:60, //地图矩形幕布
      span_width:17,//标识码内容
      home_menu_btn:require ('../../assets/imgs/home_menu_btn.png'), //显示详细信息按钮
      uav_img:require ('../../assets/imgs/uav.jpg'),//飞机图片
      uav_details_arr:[
        {
          name:'机身重量(kg):',
          class:'uav_details_c',
          details:'',
        },
        {
          name:'起飞重量(kg):',
          class:'uav_details_b',
          details:'',
        },
        {
          name:'起飞航线(km):',
          class:'uav_details_c',
          details:'',
        },
        {
          name:'巡航速度(s/m):',
          class:'uav_details_b',
          details:'',
        },
           {
          name:'动力方式:',
          class:'uav_details_c',
          details:'',
        },
      ],//飞机详情
      //------仪表盘-------
      flight_speed_list: [40,35,30,25,20,15,10], //速度刻度盘列表
      flight_height_list: [1300,1200,1100,1000,900,800,700], //高度刻度盘
      speed_style:"yibiao-blue",
      yibiao_style:"yibiao-green",
      flight_speed: 10, //实时飞行速度 m/s
      // flight_speed_goal: 20, //目标飞行速度
      flight_height: 700, //实时相对航高 m
      // flight_height_goal: 1000, //目标航高
      flightObj: {
        name:'',
        company:'',
        true_airspeed:'', //真空速度
        model_name:'',
        alt:'',//高度
        lon:'',//经度
        lat:'',//纬度
        uav_no:'',//飞机编号
        uas_serial_id:'',//飞机标识码
				ground_speed:'',//飞机地速
				remaining_dis:'',//剩余距离
				remaining_oil:'',//剩余燃油/电量,百分比
				remaining_time:'',//剩余时间,分钟
				link_type_name:'',//链路名称
				temperature:'0.0',//温度
        wind_speed: 0.0,//风速
				pitch:0, //-90--90,飞机俯仰角,飞机纵轴与水平面之间的夹角,飞机抬头为正
				roll:0, //-90--90飞机横滚角,飞机横轴与水平面之间的夹角,右侧向下符号为正
				yaw:0, //-90--90飞机偏航角,飞机纵轴与航线间的夹角,相对航线左偏为正
        direction:'',//偏航方向
				velocity_z:0,//上升速度
        course:0,//角度
        mot_status:'0',//动力系统
        nav_status:'0',//导航系统
        com_status:'0',//通信系统
        image:'',//飞机图片
      },//正在飞行详情
      parameter_list_arr:[ //详细信息
        {
          name:'字段名',
          value:'取值',
          class:'uav_details_b'
        },
        {
          name:'消息标识(message_id)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'飞行任务编号(fly_id)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'飞机编号(uav_no)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'飞机状态(fly_status)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'当前时间(time)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'飞机经度(lon)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'飞机纬度(lat)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'海拔高度(alt)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'地面点海拔(ground_alt)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'飞机航向角(course)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'温度(temperature)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'俯仰角(pitch)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'横滚角(roll)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'偏航角(yaw)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'真空速(true_airspeed)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'地速(ground_speed)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'油/电量(remaining_oil)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'剩余距离(remaining_dis)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'剩余时间(remaining_time)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'动力系统状态(mot_status)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'导航系统状态(nav_status)',
          value:'',
          class:'uav_details_w'
        },
        {
          name:'通信系统状态(com_status)',
          value:'',
          class:'uav_details_c'
        },
        {
          name:'风速(wind_speed)',
          value:'',
          class:'uav_details_w'
        },
      ],
      operation_list_arr:[ //操作选项
        [
          {
            name:'起飞',
            value:'',
            image:require('../../assets/imgs/take_off.png'),
            class:'operation_box',
            url:'/monitor/commandTakeOff',
          },
          {
            name:'解锁',
            value:'',
            image:require('../../assets/imgs/Password_ic.png'),
            class:'',
            url:'/monitor/disarm',
          }
          ,
          {
            name:'备降',
            value:'',
            image:require('../../assets/imgs/Reserve_anding.png'),
            class:'',
            url:'/monitor/commandReadyToLand',
          },
          {
            name:'返航',
            value:'',
            image:require('../../assets/imgs/Return.png'),
            class:'',
            url:'/monitor/commandReturn',
          }
        ],[
          {
            name:'降落',
            value:'',
            image:require('../../assets/imgs/land.png'),
            class:'operation_box',
            url:'monitor/commandLand',
          },
          {
            name:'等待',
            value:'',
            image:require('../../assets/imgs/wait.png'),
            class:'',
            url:'/monitor/commandWait',
          }
          ,
          {
            name:'开伞',
            value:'',
            image:require('../../assets/imgs/Open_umbrella.png'),
            class:'',
            url:'0',
          },
          {
            name:'巡航',
            value:'',
            image:require('../../assets/imgs/cruise.png'),
            class:'',
            url:'0',
          }
        ]
      ],
      fly:{ //飞机图标
        Mk: require('../../assets/imgs/Mk-50_01.png'), //Mk
				CYGNUS: require('../../assets/imgs/CYGNUS_01.png'), //CYGNUS
				SLH: require('../../assets/imgs/SLH_90T160T_01.png'), //SLH
				S50: require('../../assets/imgs/S50_01.png'), //S50
				start:require('../../assets/imgs/sta.png'), //起点
        end:require('../../assets/imgs/end.png'), //终点点
        blue:require('../../assets/imgs/aircraft_blue1_ic.png'),
        yellow:require('../../assets/imgs/aircraft_yellow_ic.png'),
        yellowUav:require('../../assets/imgs/yellowUav.png'),
        greenUav:require('../../assets/imgs/greenUav.png'),
        green:require('../../assets/imgs/aircraft_green_ic.png'),
        SF:require('../../assets/imgs/SF.png')
      },
      remove_marker:[],//存储marker
      gmap: null,
      //fly_id_arr:[],//存储飞行数据
      coordinates_data:{ //测试数据
        lat:'39.92', //飞机纬度
        lon:'116.46', //飞机经度
        start_lat:'39.92', //飞机纬度
        start_lon:'116.46', //飞机经度
        end_lat:'69.92', //飞机纬度
        end_lon:'116.46', //飞机经度
        model_name:'CYGNUS',//飞机编号
        fly_id:"UAS00522689_2019_10_18_17_21_38", //当前飞行任务编号
        uas_serial_id:'',//标识码
        course:1, //飞机航向角
        temperature:'0.0',//温度
        wind_speed: 0.0,//风速
        roll:22,  //飞机横滚角
        pitch:11, //飞机俯仰角
        yaw:'11', //偏航角
        uav_no:"UAS00522689", //飞机编号
        alt:2000, //飞机海拔高度
        ground_alt:1000, //机下地面点海拔
        ground_speed:0, //飞机地速
        true_airspeed:0,//真空速度
        remaining_oil:80, //剩余燃油/电量,百分比
        remaining_dis:500, //剩余距离,km
        remaining_time:80, //剩余时间,分钟
        mot_status:0, //动力系统状态0正常,1故障
        nav_status:0, //导航系统状态0正常,1故障
        com_status:0, //通信系统状态0正常,1故障
        flight_coordinate_waypoints: [ {lon: "116.46", lat: "39.92"},
          { lon: "116.46", lat: "49.92"},
          { lon: "116.46", lat: "59.3383"},
          { lon: "116.46", lat: "69.92"} ,
        ]
      },
      imgIcon: {//边角
				leup: require('../../assets/uimg/angle_left_up.png'),
				riup: require('../../assets/uimg/angle_right_up.png'),
			  ledow: require('../../assets/uimg/angle_left_down.png'),
				ridow: require('../../assets/uimg/angle_right_down.png'),
      },
      trackPoints:[],//存储航线
      sotrage_fly_id:'',//存储飞机id
      sotrage_fly_details_obj:{},//存储所有飞机列表
      power_status:'', //状态类控制
      gps_status:'',//状态类控制
      tong_status:'',//状态类控制
      operation_obj:{
        instruction:'',
        time:'',
        alt:'',
        lat:'',
        lon:'',
        fly_id:'',
      },//操作详情
      judge_operation:false,
      air_line_arr:[],//规划的航线
      history_logsArr:[],//飞机历史航迹
      logs_count:0,//logs长度
      name:'',//飞机名称
    }
  },
  watch:{
    videoUrl(val){
      if(this.useDplayer && val.length>10) {
        // dplayer切换视频
        this.dp.switchVideo({
          url: val
        })
      }
    },
    show_right(e){
      if(this.useDplayer) {
        if(!e){
          this.dp.play()
        }else{
          this.dp.pause()
        }
      }
    },
    show_left(e){
      if(e){
        this.span_width=17
      }else{
        this.span_width=11
      }
    },
  },
  methods: {
    // 初始化 dplayer
    initDplayer: function(){
      this.dp = new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        video: {
            url: this.videoUrl,
        },
      })
    },
    getLatLng: function(map, location) {
      var gcj02towgs84 = coordtransform.gcj02towgs84(location.lng(), location.lat());
			if(this.alternate){
				this.$confirm('备降坐标为纬度：'+gcj02towgs84[1].toFixed(7) + "， 经度：" + gcj02towgs84[0].toFixed(7),' 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let coordinates={
						lat:gcj02towgs84[1],
						lon:gcj02towgs84[0]
					}
					request2({
            url: 'monitor/commandReadyToLand',
            method: "post",
            data: {
              token: this.$store.getters.token,
              fly_id:this.sotrage_fly_id,
              lat:coordinates.lat,
              lon:coordinates.lon
            }
          })
          .then(response => {
            this.operation_obj.instruction=response.data.data.cmd_content
            this.operation_obj.time=response.data.data.time
            this.operation_obj.fly_id=response.data.data.fly_id
            this.judge_operation=true
            this.$message.success('开始备降');
          })
          .catch(err => {
          });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消备降'
					});
				});
				this.alternate=false
			}
		},
    show_details(){
      if(this.show_right){
        this.show_right=false
      }else{
        this.show_right=true
        this.show_left=true
      }
    },
    init: function() {
      this.setDateTime();
    },
    setDateTime: function() { //测试移动飞机，本地生成数据
      this.coordinates_data.lat=(this.coordinates_data.lat-0)+0.05
      this.coordinates_data.course=Math.floor((Math.random()*360)+0)
      this.coordinates_data.temperature=Math.floor((Math.random()*10)+0)
      this.coordinates_data.wind_speed=Math.floor((Math.random()*10)+0)
      this.coordinates_data.roll=Math.floor((Math.random()*10)+0)
      this.coordinates_data.pitch=Math.floor((Math.random()*5)+0)
      this.coordinates_data.yaw=Math.floor((Math.random()*360)+0)
      this.coordinates_data.alt=Math.floor((Math.random()*600)+700) //飞机海拔高度
      this.coordinates_data.ground_alt=Math.floor((Math.random()*700)+1)  //机下地面点海拔
      this.coordinates_data.ground_speed=Math.floor((Math.random()*40)+0) //飞机地速
      this.coordinates_data.true_airspeed=Math.floor((Math.random()*40)+1) //真空速度
      this.coordinates_data.remaining_oil=Math.floor((Math.random()*100)+1) //剩余燃油/电量,百分比
      this.coordinates_data.remaining_dis=Math.floor((Math.random()*1000)+1) //剩余距离,km
      this.coordinates_data.remaining_time=Math.floor((Math.random()*60)+1) //剩余时间,分钟
      this.test_fly(this.coordinates_data)
      setTimeout(this.setDateTime, 1000);
    },
    test_fly(data){ //移动飞机
      var wgs84togcj02 = coordtransform.wgs84togcj02(data.lon, data.lat); //wgs84转gcj02
      data.lon=wgs84togcj02[0]
      data.lat=wgs84togcj02[1]

      this.trackPoints[0].point.push({lat:data.lat,lon:data.lon})
      this.addfly(data,this.trackPoints[0].marker)
      this.addPath(0)
      data.name=this.trackPoints[0].icon

      if(this.judge_operation){
        this.operation_obj.alt=(+data.alt).toFixed(2)
        this.operation_obj.lon=(+data.lon).toFixed(2)
        this.operation_obj.lat=(+data.lat).toFixed(2)
        this.judge_operation=false;
      }
      if(document.getElementById("big_round")){
        document.getElementById("big_round").style.transform="rotate(" + data.roll + "deg)"
        document.getElementById("roundbox").style.transform="rotate(" +  data.roll + "deg)"
        document.getElementById("round").style.transform="rotate(" + data.roll + "deg) translateY(" + (data.pitch-0)*2.25 + "px)"
        document.getElementById("round_1").style.transform="rotate(" + data.roll + "deg) translateY(" + (data.pitch-0)*2.25 + "px)"
        document.getElementById("redfly").style.transform="rotate(" + data.course + "deg)"
        this.flightObj.pitch=(+data.pitch).toFixed(2)  //俯仰角
        this.flightObj.roll=(+data.roll).toFixed(2)    //横滚角
        this.flightObj.yaw=(+data.yaw).toFixed(2)      //偏航角
        this.flight_height=parseInt(data.alt-0)-parseInt(data.ground_alt-0) //实时相对航高 m
        this.flight_speed=parseInt(data.ground_speed-0)   //实时飞行速度 m/s
        this.flightObj.course=(+data.course).toFixed(2)
        this.flightObj.temperature=(+data.temperature).toFixed(2)//温度
        this.flightObj.wind_speed=(+data.wind_speed).toFixed(2)//风速
        this.flightObj.alt=parseInt(data.alt)
        this.flightObj.ground_alt=parseInt(data.ground_alt)
        this.flightObj.ground_speed=this.flight_speed //飞机地速
        this.flightObj.fly_id=data.fly_id//飞机id
        this.flightObj.lat=(+data.lat).toFixed(2)      //纬度
        this.flightObj.lon=(+data.lon).toFixed(2)      //经度
        this.flightObj.true_airspeed=parseInt(+data.true_airspeed)      //真空速度
        this.flightObj.remaining_dis=(+data.remaining_dis).toFixed(2)      //剩余距离
        this.flightObj.remaining_oil=(+data.remaining_oil).toFixed(2)      //剩余燃油/电量,百分比
        this.flightObj.remaining_time=(+data.remaining_time).toFixed(2)  //剩余时间,分钟

        this.parameter_list_arr[1].value=data.message_id //任务id
        this.parameter_list_arr[2].value=data.fly_id //飞机id
        this.parameter_list_arr[3].value=data.uav_no //飞机编号
        this.parameter_list_arr[4].value=data.fly_status //1:起飞,2:爬升,3:巡航,4:降落,5:等待,6:开伞,7:备降,8:返航
        this.parameter_list_arr[5].value=data.time //时间当前时间
        this.parameter_list_arr[6].value=data.lon //飞机经度
        this.parameter_list_arr[7].value=data.lat //飞机纬度
        this.parameter_list_arr[8].value=data.alt //飞机海拔高度
        this.parameter_list_arr[9].value=data.ground_alt //机下地面点海拔
        this.parameter_list_arr[10].value=data.course //飞机航向角
        this.parameter_list_arr[11].value=data.temperature //温度
        this.parameter_list_arr[11].value=data.wind_speed //风速
        this.parameter_list_arr[12].value=data.pitch //飞机俯仰角
        this.parameter_list_arr[13].value=data.roll //飞机横滚角,飞机横轴与水平面之间的夹角,右侧向下符号为正
        this.parameter_list_arr[14].value=data.yaw //飞机偏航角,飞机纵轴与航线间的夹角,相对航线左偏为正
        this.parameter_list_arr[15].value=data.true_airspeed //真空速度
        this.parameter_list_arr[16].value=data.ground_speed //飞机地速
        this.parameter_list_arr[17].value=data.remaining_oil //剩余燃油/电量,百分比
        this.parameter_list_arr[18].value=data.remaining_dis //剩余距离,km
        this.parameter_list_arr[19].value=data.remaining_time //剩余时间,分钟
        this.parameter_list_arr[20].value=data.mot_status //动力系统状态0正常,1故障
        this.parameter_list_arr[21].value=data.nav_status //导航系统状态0正常,1故障
        this.parameter_list_arr[22].value=data.com_status //通信系统状态0正常,1故障

        if(data.mot_status==0){
          this.flightObj.mot_status='正常'
          this.power_status='flight_status_box_true'
        }else{
          this.flightObj.mot_status='异常'
          this.power_status='flight_status_box'
        }
        if(data.nav_status==0){
          this.flightObj.nav_status='正常'
          this.gps_status='flight_status_box_true'
        }else{
          this.flightObj.nav_status='异常'
          this.gps_status='flight_status_box'
        }
        if(data.com_status==0){
          this.flightObj.com_status='正常'
            this.tong_status='flight_status_box_true'
        }else{
          this.flightObj.com_status='异常'
          this.tong_status='flight_status_box'
        }
        if(data.course==0||data.course==360){
          this.flightObj.direction="正北"
        }else if(data.course==90){
          this.flightObj.direction="正西"
        }else if(data.course==180){
          this.flightObj.direction="正南"
        }else if(data.course==270){
          this.flightObj.direction="正东"
        }else if(data.course<90){
          this.flightObj.direction="东北"
        }else if(data.course<180){
          this.flightObj.direction="东南"
        }else if(data.course<270){
          this.flightObj.direction="西南"
        }else{
          this.flightObj.direction="西北"
        }
      }
      // this.updateMakerAngle(this.trackPoints[0].marker,this.fly[this.trackPoints[0].icon], {width:250,height:100,srcWidth:100,srcHeight:100},data.course,data,"#339966")
      this.updateMakerAngle(this.trackPoints[0].marker,this.fly[this.trackPoints[0].icon],{width:30,height:30},data.course)
    },
    formatTooltip(val) {
      this.mapOpacity=val
      this.rectangle.setOptions({
        fillOpacity: this.mapOpacity/100,
      })
      this.rectangle.setMap(this.gmap)
		},
    operation_way(e,name){ //操作请求
      if(name=='备降'){
        this.$message('请在地图上点击一个降落地点')
        this.alternate=true
        return;
      }else if(e==0||this.sotrage_fly_id==''){
        return;
      }
      request2({
        url: e,
        method: "post",
        data: {
          token: this.$store.getters.token,
          fly_id:this.sotrage_fly_id,
        }
      })
      .then(response => {
        this.operation_obj.instruction=response.data.data.cmd_content
        this.operation_obj.time=response.data.data.time
        this.operation_obj.fly_id=response.data.data.fly_id
        this.judge_operation=true
        if(name=='备降'||name=='返航'||name=='等待'||name=='开伞'||name=='巡航'){
          this.$message.success('开始'+name);
        }else{
          this.$message.success(name+"成功");
        }
      })
      .catch(err => {});
    },
    addMarker(location,title,icon,zIndex) {//添加飞机
				var marker = new google.maps.Marker({
				map: this.gmap,//地图
				icon: this.fly[icon],//图标
				draggable: false,//是否可拖拽
				position: location,//定位
        title: title,//名称
        zIndex:zIndex,
      })
      this.remove_marker.push(marker)
			return marker
    },
    addfly(flight,marker){ //接受正在飞行参数
			this.moveMarker(marker, new google.maps.LatLng(flight.lat,flight.lon))
    },
    moveMarker(marker, latlng) { //移动飞机
			marker.setPosition(latlng)
    },
    addPath(currIndex) { //添加航线
      var storage_path=[]
      for(let i=0;i<this.trackPoints[currIndex].point.length;i++){
        storage_path[storage_path.length] = new google.maps.LatLng(this.trackPoints[currIndex].point[i].lat,this.trackPoints[currIndex].point[i].lon);
      }
      if(this.trackPoints[currIndex].path != null) {
        this.trackPoints[currIndex].path.setMap(null)
      }
      this.trackPoints[currIndex].path = new google.maps.Polyline({
        path:storage_path,
        strokeColor: "#0db1fb", // 线条颜色1
        strokeOpacity: 1.0, // 线条透明度
        strokeWeight: 3 // 线条粗细
      });
      this.trackPoints[currIndex].path.setMap(this.gmap)
    },
    Path() { //添加航线
      var storage_path=[]
      for(let i=0;i<this.air_line_arr.length;i++){
        var wgs84togcj02 = coordtransform.wgs84togcj02(this.air_line_arr[i].lon, this.air_line_arr[i].lat); //wgs84转gcj02
        this.air_line_arr[i].lon =wgs84togcj02[0]
        this.air_line_arr[i].lat =wgs84togcj02[1]
        storage_path[storage_path.length] = new google.maps.LatLng(this.air_line_arr[i].lat,this.air_line_arr[i].lon);
      }

     let path = new google.maps.Polyline({
        path:storage_path,
        strokeColor: "#fff", // 线条颜色
        strokeOpacity: 1.0, // 线条透明度
        strokeWeight: 3 // 线条粗细
      });
      path.setMap(this.gmap)
    },
    addClick(marker,obj) {        //点击飞机跳转详情页
			const that = this
      marker.addListener('click', function () {
        that.sotrage_fly_id=that.$route.query.id//存储飞机id
        that.show_left=false
        that.show_right=false
      })
    },
    updateMakerAngle: function (marker, url, size, angle) { //更新飞机并调用转动方法
			if (marker) {
			var _this = this
				this.makeImageRotation({
					url: url,
					size: size,
					degree: angle
				}, function (data) {
					marker.setOptions({
						icon: {
							url:data,
							size:size,
							anchor: new google.maps.Point(size.width / 2, size.height / 2)
						},
					})
				});
			}
    },
    makeImageRotation: function(icon, callback) { //转动飞机
      var rImg = new Image();
      rImg.setAttribute('crossOrigin', 'anonymous');
      rImg.src =  icon.url;
      rImg.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = icon.size.width;
        canvas.height = icon.size.height;
        var context = canvas.getContext("2d");
        var angle = icon.degree * Math.PI / 180;
        var centerX = icon.size.width / 2;
        var centerY = icon.size.height / 2;
        context.clearRect(0, 0, icon.size.width, icon.size.height);
        context.save();
        context.translate(centerX, centerY);
        context.rotate(angle);
        context.translate(-centerX, -centerY);
        context.drawImage(rImg, 0, 0);
        context.restore();
        var result = canvas.toDataURL('image/png');
        callback(result);
      }
		},
    // updateMakerAngle: function (marker, url, size , angle,f_data,color) {
		// 	if (marker) {
		// 	// this.inc += 0.1
		// 	var _this = this
		// 		this.makeImageRotation({
		// 			url: url,
		// 			size: size,
		// 			degree: angle,
		// 			f_data:f_data,
		// 			color:color
		// 		}, function (data) {
		// 			var anchor = _this.rotate(size.srcWidth / 2, 26, size.srcWidth / 2, size.srcHeight / 2,angle)
		// 			marker.setOptions({
		// 				icon: {
		// 					url:data,
		// 					size:size,
		// 					anchor: new google.maps.Point(anchor[0], anchor[1])
		// 				},
		// 			})
		// 		});
		// 	}
    // },
    // makeImageRotation: function(icon, callback) {
    //   icon.f_data.name=this.name
    //   var rImg = new Image();
    //   rImg.setAttribute('crossOrigin', 'anonymous');
    //   rImg.src = icon.url;
    //   rImg.onload = function () {
    //     var canvas = document.createElement("canvas");
    //     var W = icon.size.srcWidth, H = icon.size.srcHeight;
    //     canvas.width = W;
    //     canvas.height = H;
    //     var context = canvas.getContext("2d");
    //     var angle = icon.degree * Math.PI / 180;
    //     var centerX = W / 2;
    //     var centerY = H / 2;
    //     context.clearRect(0, 0, W, H);
    //     context.save();
    //     context.translate(centerX, centerY);
    //     context.rotate(angle);
    //     context.translate(-centerX, -centerY);
    //     context.drawImage(rImg, 0, 0);
    //     context.restore();
    //     var result = canvas.toDataURL('image/png');
    //     var rImg2 = new Image();
    //     rImg2.setAttribute('crossOrigin', 'anonymous');
    //     rImg2.src = result;
    //     rImg2.onload = function () {
    //         // 重新设置画布尺寸并增加文字
    //       canvas.width = icon.size.width;
    //       canvas.height = icon.size.height;
    //       context = canvas.getContext("2d");

    //       context.drawImage(rImg2, 0, 0)

    //       // 添加飞机名称背景色
    //       context.save();
    //       context.fillStyle = icon.color
    //       context.fillRect(107, 17, 120, 20)
    //       context.restore();

    //       // 设置字体
    //       context.font = "13px SimSun";
    //       // 设置颜色
    //       context.fillStyle = "#fff";
    //       // 设置水平对齐方式
    //       context.textAlign = "left";
    //       // 设置垂直对齐方式
    //       context.textBaseline = "top";
    //       // 绘制文字（参数：要写的字，x坐标，y坐标）
    //       // context.fillText("CYGNUS", 110, 0);
    //       context.fillText(icon.f_data.name, 110, 20);
    //       context.font = "12px SimSun";
    //       context.fillText("Lat: " + icon.f_data.lat, 110, 38);
    //       context.fillText("Lon: " + icon.f_data.lon, 110, 53);
    //       context.fillText("Alt: "+ icon.f_data.alt+"m", 110, 68);

    //       var result = canvas.toDataURL('image/png');

    //       callback(result);
    //     }
		// 	}
		// },
    rotate: function (x, y, xm, ym, a) {
			var cos = Math.cos,
				sin = Math.sin,
				a = a * Math.PI / 180, // 先把角度转换成弧度

				// 计算旋转后点的位置
				xr = (x - xm) * cos(a) - (y - ym) * sin(a)   + xm,
				yr = (x - xm) * sin(a) + (y - ym) * cos(a)   + ym;

			return [xr, yr];
    },
    pull_fing() {
      var ws = null;
      connect(); // 开始ws测试
      let that = this;
      function connect() {
        ws = new WebSocket(wsUri_1);
        // 当socket连接打开时发送数据
         ws.onopen = onopen;
        // 当有消息时根据消息类型显示不同信息
         ws.onmessage = onmessage;
         ws.onclose = function() {
          console.log("连接关闭，重新连接");
          connect();
        };
         ws.onerror = function() {
          console.log("出现错误");
        };
        function onopen() {
          // 发送ws
          var send_data = JSON.stringify({
            user_token: that.$store.getters.token,
            flight_mission_id:that.$route.query.id
          });
          console.log("发送数据:" + send_data);
         ws.send(send_data);
        }
        let i = 0;
        // 服务端发来消息时
        function onmessage(e) {
          var data = eval("(" + e.data + ")");
          that.test_fly(data.data)
        }
      }
    },
    fly_detail(fly_id){
      request2({
        url: "/monitor/detail",
        method: "post",
        data: {
          token: this.$store.getters.token,
          fly_id:this.$route.query.id,
        }
      })
      .then(response => {
        this.videoUrl=response.data.rtmp
        if(this.useDplayer) this.videoUrl=response.data.http // 'http://39.96.93.166/hls/UAS046018024.m3u8' //'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8'  //测试使用
        this.videoStatus=response.data.on_fly_status
        this.flightObj.uas_serial_id=response.data.uas_serial_id
        this.flightObj.model_name=response.data.model_name
        this.flightObj.name=response.data.name
        this.flightObj.company=response.data.company
        this.uav_details_arr[0].details=response.data.plane_weight//机身重量
        this.uav_details_arr[1].details=response.data.max_weight//起飞重量
        this.uav_details_arr[2].details=response.data.max_voyage//最大过程
        this.uav_details_arr[3].details=response.data.cruise_speed //巡航速度
        this.uav_img=response.data.url//飞机图片
        if(response.data.power_mode==1){//动力方式
          this.uav_details_arr[4].details='油动'
        }else{
          this.uav_details_arr[4].details='电动'
        }
        var wgs84togcj02 = coordtransform.wgs84togcj02(response.data.start_lon , response.data.start_lat ); //wgs84转gcj02
        response.data.start_lon =wgs84togcj02[0]
        response.data.start_lat =wgs84togcj02[1]

        var wgs84togcj02 = coordtransform.wgs84togcj02(response.data.end_lon , response.data.end_lat ); //wgs84转gcj02
        response.data.end_lon =wgs84togcj02[0]
        response.data.end_lat =wgs84togcj02[1]

        this.start_fly_path(response.data)
        if(response.data.on_fly_status==0){
          this.show_operation=false
          this._history_view(response.data)
          for(let i=0;i<response.data.logs_count;i++){
            this.details_logs(i+1)
          }
        }else{
          this.pull_fing()
        }
      })
      .catch(err => {
      });
    },
    start_fly_path(data){
       let icon=''
      if(data.logo_url!=null){
        icon='SF'
      }else if(data.on_fly_status==1){
        if(data.plane_type==2||data.plane_type==3){
          icon='green'
        }else{
          icon='greenUav'
        }
      }else{
        if(data.plane_type==2||data.plane_type==3){
          icon='yellow'
        }else{
          icon='yellowUav'
        }
      }
      this.name=data.model_name
      this.air_line_arr=data.flight_coordinate_waypoints //规划的航线
      let d= new google.maps.LatLng(data.start_lat,data.start_lon);
      this.addMarker(d,'起点','start',1);
      const marker=this.addMarker(d,data.model_name,icon,3);
      this.trackPoints[0]={point:[],on_fly_id:'',path:null,icon:icon,marker:marker}
      let end= new google.maps.LatLng(data.end_lat,data.end_lon);

      this.gmap.setCenter(end, 12);
      this.addMarker(end,'终点','end',1);
      this.addClick(marker,data)
      if(this.air_line_arr!=null){
        this.Path()
      }
    },
    _history_view(data){
        var wgs84togcj02 = coordtransform.wgs84togcj02(data.logs[0].lon , data.logs[0].lat ); //wgs84转gcj02
        data.logs[0].lon =wgs84togcj02[0]
        data.logs[0].lat =wgs84togcj02[1]
        document.getElementById("big_round").style.transform="rotate(" + data.logs[0].roll + "deg)"
        document.getElementById("roundbox").style.transform="rotate(" +  data.logs[0].roll + "deg)"
        document.getElementById("round").style.transform="rotate(" + data.logs[0].roll + "deg) translateY(" + (data.pitch-0)*2.25 + "px)"
        document.getElementById("round_1").style.transform="rotate(" + data.logs[0].roll + "deg) translateY(" + (data.pitch-0)*2.25 + "px)"
        document.getElementById("redfly").style.transform="rotate(" + data.logs[0].course + "deg)"
        this.flightObj.pitch=(+data.logs[0].pitch).toFixed(2)  //俯仰角
        this.flightObj.roll=(+data.logs[0].roll).toFixed(2)    //横滚角
        this.flightObj.yaw=(+data.logs[0].yaw).toFixed(2)      //偏航角
        this.flight_height=parseInt(data.logs[0].alt-0)-parseInt(data.logs[0].ground_alt-0) //实时相对航高 m
        this.flight_speed=parseInt(data.logs[0].ground_speed-0)   //实时飞行速度 m/s
        this.flightObj.course=(+data.logs[0].course).toFixed(2)//航向角
        this.flightObj.temperature=(+data.logs[0].temperature).toFixed(2)//温度
        this.flightObj.wind_speed=(+data.logs[0].wind_speed).toFixed(2)//速度
        this.flightObj.alt=parseInt(data.logs[0].alt)
        this.flightObj.ground_alt=parseInt(data.logs.ground_alt)
        this.flightObj.ground_speed=this.flight_speed //飞机地速

        this.flightObj.lat=(+data.logs[0].lat).toFixed(2)      //纬度
        this.flightObj.lon=(+data.logs[0].lon).toFixed(2)      //经度
        this.flightObj.true_airspeed=parseInt(+data.logs[0].true_airspeed)      //真空速度
        this.flightObj.remaining_dis=(+data.logs[0].remaining_dis).toFixed(2)      //剩余距离
        this.flightObj.remaining_oil=(+data.logs[0].remaining_oil).toFixed(2)      //剩余燃油/电量,百分比
        this.flightObj.remaining_time=(+data.logs[0].remaining_time).toFixed(2)  //剩余时间,分钟

        this.parameter_list_arr[1].value=data.logs[0].message_id //任务id
        this.parameter_list_arr[2].value=data.logs[0].fly_id //飞机id
        this.parameter_list_arr[3].value=data.logs[0].uav_no //飞机编号
        this.parameter_list_arr[4].value=data.logs[0].fly_status //1:起飞,2:爬升,3:巡航,4:降落,5:等待,6:开伞,7:备降,8:返航
        this.parameter_list_arr[5].value=data.logs[0].time //时间当前时间
        this.parameter_list_arr[6].value=data.logs[0].lon //飞机经度
        this.parameter_list_arr[7].value=data.logs[0].lat //飞机纬度
        this.parameter_list_arr[8].value=data.logs[0].alt //飞机海拔高度
        this.parameter_list_arr[9].value=data.logs[0].ground_alt //机下地面点海拔
        this.parameter_list_arr[10].value=data.logs[0].course //飞机航向角
        this.parameter_list_arr[11].value=data.logs[0].temperature //温度
        this.parameter_list_arr[12].value=data.logs[0].pitch //飞机俯仰角
        this.parameter_list_arr[13].value=data.logs[0].roll //飞机横滚角,飞机横轴与水平面之间的夹角,右侧向下符号为正
        this.parameter_list_arr[14].value=data.logs[0].yaw //飞机偏航角,飞机纵轴与航线间的夹角,相对航线左偏为正
        this.parameter_list_arr[15].value=data.logs[0].true_airspeed //真空速度
        this.parameter_list_arr[16].value=data.logs[0].ground_speed //飞机地速
        this.parameter_list_arr[17].value=data.logs[0].remaining_oil //剩余燃油/电量,百分比
        this.parameter_list_arr[18].value=data.logs[0].remaining_dis //剩余距离,km
        this.parameter_list_arr[19].value=data.logs[0].remaining_time //剩余时间,分钟
        this.parameter_list_arr[20].value=data.logs[0].mot_status //动力系统状态0正常,1故障
        this.parameter_list_arr[21].value=data.logs[0].nav_status //导航系统状态0正常,1故障
        this.parameter_list_arr[22].value=data.logs[0].com_status //通信系统状态0正常,1故障
        this.parameter_list_arr[23].value=data.logs[0].wind_speed //风速

        if(data.logs[0].mot_status==0){
          this.flightObj.mot_status='正常'
          this.power_status='flight_status_box_true'
        }else{
          this.flightObj.mot_status='异常'
          this.power_status='flight_status_box'
        }
        if(data.logs[0].nav_status==0){
          this.flightObj.nav_status='正常'
          this.gps_status='flight_status_box_true'
        }else{
          this.flightObj.nav_status='异常'
          this.gps_status='flight_status_box'
        }
        if(data.logs[0].com_status==0){
          this.flightObj.com_status='正常'
            this.tong_status='flight_status_box_true'
        }else{
          this.flightObj.com_status='异常'
          this.tong_status='flight_status_box'
        }
        if(data.logs[0].course==0||data.course==360){
          this.flightObj.direction="正北"
        }else if(data.logs[0].course==90){
          this.flightObj.direction="正西"
        }else if(data.logs[0].course==180){
          this.flightObj.direction="正南"
        }else if(data.logs[0].course==270){
          this.flightObj.direction="正东"
        }else if(data.logs[0].course<90){
          this.flightObj.direction="东北"
        }else if(data.logs[0].course<180){
          this.flightObj.direction="东南"
        }else if(data.logs[0].course<270){
          this.flightObj.direction="西南"
        }else{
          this.flightObj.direction="西北"
        }
    },
    Select_times_speed(e){ //选择倍速
      this.Times_speed=e-0
        if(this.play_Bool){
          clearTimeout(this.Timing)
          this.speed_up()
        }
      },
    speed_up(){  //播放
      this.play_Bool=true
      this.stop_flying=false
      if(this.history_logsArr.length==0)return
      if(this.storage_play>=this.history_logsArr.length){
        this.stop()
      }
      clearTimeout(this.Timing)
      this.Timing=setTimeout(() => {
        this.storage_play+=this.Times_speed;
        if(this.storage_play>=this.history_logsArr.length){
          this.suspended()
          return;
        }
        this.test_fly(this.history_logsArr[this.storage_play])
        this.speed_up()},1000);
    },
    suspended(){ //暂停
			this.play_Bool=false
			clearTimeout(this.Timing)
    },
    stop(){ //停止
			this.stop_flying=true
			this.play_Bool=false
			clearTimeout(this.Timing)
			this.storage_play=1;
      this.test_fly(this.history_logsArr[0])
      this.trackPoints[0].path.setMap(null)
      this.trackPoints[0].point=[]
    },
    details_logs(i){
      request2({
        url: "/monitor/detailLogs",
        method: "post",
        data: {
          token: this.$store.getters.token,
          fly_id:this.$route.query.id,
          id:i
        }
      })
      .then(response => {
        this.history_logsArr.push(...response.data);
        // console.log(this.history_logsArr)
      })
      .catch(err => {
      });
    },
    _OpenUrl(url){
      let routeData = this.$router.resolve({path:'/video',query:{url:url}});
      window.open(routeData.href, '_blank');
    }
  }
};
</script>
<style  lang="scss">
 @import "~@/styles/variables.scss";

  .start_f{
    min-height: calc(100vh - #{$nav-height} );
    .el-input__inner{
      color: #fff;
      background-color:transparent;
      border: 2px solid #06c6f7;
      border-radius: 0;
    }
    .el-card{
      padding: 0px 0.1rem;
      margin: 0px 20px;
      border-radius: 0px;
      background-color: rgba(9,33,58,0.6);
      border: 0px solid rgba(0,255,255,0.35);
      color: #fff;
    }
    #cardfour {
        position: relative;
        border-radius: 0px;
      .boxleftup{
        position: relative;
        top: 0px;
        left: -10px;
      }
      .boxleftdow{
        position: absolute;
        bottom: 0px;
        left: 0px;
      }
      .boxrightup{
         position: absolute;
        top: 0px;
        right: 0px;
      }
      .boxrightdow{
         position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
    .tool{
      padding-top: 0.15rem;
      padding-bottom: 0.15rem;

      li{
        height: 0.55rem;
        text-align: center;
      }
      li:hover{
        cursor:pointer;
      }
      img{
        width: 0.4rem;
      }
      p{
        text-align: center;
      }
      p:hover{
        cursor:pointer;
      }
      //选择器 倍速
      .el-input__inner{
        background-color: transparent;
        border: none;
        color: #409EFF;
        font-size: 0.24rem;
        text-align: center;
        font-weight: bold;
      }
      .el-input--suffix .el-input__inner{
        padding: 0px;
      }
      .el-select .el-input.is-focus .el-input__inner{
        border-color: transparent;
      }
      .el-select .el-input__inner:focus{
        border-color: transparent;
      }
      input[type=text]:focus, select:focus{
        border: none;
      }
      .el-input__suffix{
        display: none;
      }
    }
  }
</style>
<style lang="scss" scoped>
 @import "~@/styles/variables.scss";
  .margin_top_box{
    margin-top: 0.05rem;
  }
  .live_txt_box{
    text-align: left;
    line-height: 0.4rem;
    font-size: 15px;
    color: rgba(0,255,255,0.6);
  }
  .live_play{
		width: 100%;
	}
  .box{
    min-height: calc(100vh - #{$nav-height} );
  }
	.map{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		// height: calc(100vh - 0px);
    height:100%;
	}
  .bmap-wrapper {
		width: 100%;
		height: 100%;
  }
  .card_box{
    height: calc(100vh - 94px);
    margin-top:0.2rem;
    margin-bottom:0.2rem;
  }
  .input_url{
    padding-left: 0.8rem;
  }
  .uav-weather{
    padding: 0.1rem 0px;
  }
  .uav-info-main{
		font-size: 0.18rem;
		letter-spacing:0.2em;
		text-align: left;
		img{
			width: 80%;
			// padding:0rem 0.05rem 0px 0.1rem;
		}
	}
  .uav-info-main-text{
    padding-left:0.15rem;
    border-left: 0.01rem solid ;
    letter-spacing:0.15em;
		text-align: left;
    font-size: 0.12rem;
    // color: #ccc;
    line-height: 0.15rem;
  }
  .uav-info-append{
		font-size: 0.11rem;
    padding-top: 0.4em;
	  text-align: left;
	}
 	.blank{
		margin-top: 0.1rem;
		height: 0.04rem;
		background-color: rgba(255,255,255,0.2);
	}
  .uav_img_box{
    margin-top: 0.15rem;
    padding: 0px 0px;
    font-size:0.12rem;
    color:#ccc;
  }
  .uav_details_box{
    margin:0.05rem 0px;
    line-height: 1.5;
  }
  .uav_details_c{
    background: rgba(255,255,255,0.3);
    padding: 0px 0px 0px 0.15rem;
    height: 0.2rem;
    margin: 0px 0.05rem 0px 0px;
    color: #eee;
  }
  .uav_details_b{
    background: rgba(23,61,106,0.7);
    padding: 0px 0px 0px 0.15rem;
    height: 0.2rem;
    margin: 0px 0.05rem 0px 0px;
    color: #eee;
  }
  .uav_number_box{
    margin: 0.1rem 0px 0px 0.15rem;
    font-size:0.15rem;
  }
  .uav_number_txt{
    color: rgb(1,197,248);
    font-size:0.15rem;
    letter-spacing:0.15em;
    line-height: 0.34rem;
  }
  .uav_id_txt{
   font-size:0.16rem;
   letter-spacing:0.15em;
  }

  //------仪表盘-------
  .yibiaopan{
      padding:0.15rem 0 0.1rem 0;
	}
  .yibiao-name{
    font-size:0.13rem;
    color:#ccc;
  }
  .flex-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flexroler{
    text-align: center;
    width: 100%;
	}
  .turntype{
		font-size: 0.13rem;
    padding-bottom: 0.03rem;
    color:#ccc;
	}
  .turnvalue_yaw{
    font-size: 0.2rem;
		color: rgb(1,197,248);
    padding-bottom: 0.05rem;
  }
  .turnvalue{
		font-size: 0.21rem;
		color: rgb(1,197,248);
    font-weight: 400;
		// padding-left: 0.15rem;
	}
	.flexrolef{
		 width: 100%;
     text-align: center;
	}

  //仪表盘样式
  .yibiaodi{
    position: relative;
    text-align: center;
  }
  .yibiaodiyuan{
	    position: relative;
        z-index: 43;
		width:190px;
    max-width: 100%;
	}
	.yibiaopointbox{
		position: absolute;
		top: 12px;
		width: 100%;
		// left: 139px;
		z-index: 44;
		height: 188px;
	}
  .yibiaopoint{
		margin-bottom: 71px;
    width: 10px;
	}
  .yibianred{
    position: absolute;
    width: 35px;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    z-index: 44;
	}
  .yibiaobox{
		width: 160px;
		height: 160px;
		border-radius: 50%;
		position: absolute;
		z-index: 25;
		top: 16px;
		left: 50%;
    margin-left: -80px;
		overflow: hidden;
	}
  .yibiaonei{
		width: 200px;
		height: 250px;
		margin-left: -20px;
    margin-top: -46px;
	}
	.yibiaokedubox{
		position: absolute;
		z-index: 43;
		height: 160px;
		width: 154px;
		margin-top: -10px;
		margin-top: -208px;
	}
  .yibiaokedu{
    position: absolute;
    top: 28px;
    left: 65px;
    width: 35px;
    z-index: 44;
	}
   .yibiaonum{
		position: absolute;
        top: 20px;
        left: 40px;
        z-index: 44;
	}
	.yibiaonum1{
        position: absolute;
        top: 47px;
        left: 40px;
        z-index: 44;
	}
	.yibiaonum2{
		position: absolute;
        top: 47px;
        left: 106px;
        z-index: 44;
	}
	.yibiaonum3{
		position: absolute;
        top: 125px;
        left: 40px;
        z-index: 44;
	}
	.yibiaonum4{
		position: absolute;
        top: 125px;
        left: 106px;
        z-index: 44;
	}
	.yibiaonum5{
		position: absolute;
        top: 98px;
        left: 40px;
        z-index: 44;
	}
	.yibiaonum6{
		position: absolute;
        top:98px;
       	left: 106px;
        z-index: 44;
	}
	.yibiaonum7{
		position: absolute;
    top: 20px;
    left: 106px;
    z-index: 44;
	}
  .flex-xiao{
		padding-left: 0.57rem;
    position: relative;
	}
  .yibiaoxiaoyuan{
	   width: 0.9rem;
	   position: relative;
     margin-bottom: 0.05rem;
	}
  .yibiaoresfly{
     position: absolute;
	   width: 40px;
     top: 37%;
	   left: 45.5%;;
     margin-left: calc(0.1rem - 20px);
     margin-top: -20px;
	}

  .flydetail-left-concext {
    border-bottom: 2px solid gainsboro;
    margin: 0.1rem 0px;
  }
	.yibiao-left{
		display: flex;
		justify-content: flex-end;

	}
	.yibiao-left-num{
		font-size: 0.16rem;
		margin-top: -0.05rem;
		li{
			padding-bottom: 0.3rem;
      padding-right: 6px;
      text-align: right;
      position: relative;
      top: -1px;
      &:nth-child(2){top:-6px;}
      &:nth-child(3){top:-8px;}
      &:nth-child(4){top:-10px;}
      &:nth-child(5){top:-12px;}
      &:nth-child(6){top:-16px;}
      &:nth-child(7){top:-16px;}
		}
	}
	.yibiao-left-img, .yibiao-right-img{
    width: 12px;
    img{
      width: 100%;
      height: 97%;
    }

	}
	.yibiao-right{
		display: flex;
		justify-content: end;

	}
	.yibiao-right-num{
			// margin-right: 73%;
			// margin-left: 2.2%;
			font-size: 0.16rem;
			margin-top: -0.05rem;
			li{
				padding-bottom: 0.3rem;
        padding-left: 6px;
        text-align: left;
        position: relative;
        top: -1px;
         &:nth-child(2){top:-6px;}
        &:nth-child(3){top:-8px;}
        &:nth-child(4){top:-10px;}
        &:nth-child(5){top:-12px;}
        &:nth-child(6){top:-16px;}
        &:nth-child(7){top:-16px;}
			}
	}
	.yibiao-right-img{
		width: 12px;
	}
	.yibiao-blue ,.yibiao-bluekong{
		position: absolute;
		display: flex;
		justify-content: space-between;
		padding: 0;
    font-size: 0.16rem;
		width: 100%; height: 20px; line-height: 20px;
    max-width: 101px; right: 0;

    .span-text{
      font-size: 12px;
      padding-left: 1em;
    }
    .span_left{
      padding-right: 12px + 6px;
    }
		img{
			width: 0.8rem;
		}
	}
	.yibiao-blue {
    z-index: 1;
		// top: 20px;
		background-image: url(../../assets/imgs/bluearrow.png), url(../../assets/imgs/bluearrow.png) ;
		background-size: auto 100%;
    background-position: calc(100% - 6px) 50%, -50px 50%;
    background-repeat: no-repeat;
	}
	.speed-red ,.yibiao-bluekong{
		position: absolute;
		display: flex;
		justify-content: space-between;
		padding: 0;
    font-size: 0.16rem;
		width: 100%; height: 20px; line-height: 20px;
    max-width: 101px; right: 0;

    .span-text{
      font-size: 12px;
      padding-left: 1em;
    }
    .span_left{
      padding-right: 12px + 6px;
    }
		img{
			width: 0.8rem;
		}
	}
	.speed-red {
		z-index: 1;
		background-image: url(../../assets/imgs/bluearrow-danger.png), url(../../assets/imgs/bluearrow-danger.png) ;
		background-size: auto 100%;
		background-position: calc(100% - 6px) 50%, -50px 50%;
		background-repeat: no-repeat;
	}
	.yibiao-bluekong{
		// top: 60px;
    padding-left: 0;
    color: rgb(1,197,248);
		background-image: url(../../assets/imgs/bluearrow_kong.png), url(../../assets/imgs/bluearrow_kong2.png) ;
		background-size: auto 100%;
   	background-position: calc(100% - 6px) 50%, left 50%;
    background-repeat: no-repeat;
	}
	.yibiao-green ,.yibiao-greenkong{
		position: absolute;
		display: flex;
		justify-content: space-between;
		font-size: 0.16rem;
		padding: 0;
    width: 100%; height: 20px; line-height: 20px;
    max-width: 101px; left: 0;

    .span-text{
      font-size: 12px;
      padding-right: 1em;
    }
    .span_right{
      padding-left: 12px + 6px;
    }
		img{
			width: 0.8rem;
		}
	}

	.yibiao-green {
    z-index: 1;
		// top: 20px;
		background-image: url(../../assets/imgs/greenarrow.png), url(../../assets/imgs/greenarrow.png);
		background-size: auto 100%;
    background-position: 6px 50%, 50px 50%;
    background-repeat: no-repeat;
	}
	.yibiao-red,.yibiao-greenkong{
		position: absolute;
		display: flex;
		justify-content: space-between;
		font-size: 0.16rem;
		padding: 0;
    width: 100%; height: 20px; line-height: 20px;
    max-width: 101px; left: 0;

    .span-text{
      font-size: 12px;
      padding-right: 1em;
    }
    .span_right{
      padding-left: 12px + 6px;
    }
		img{
			width: 0.8rem;
		}
	}
	.yibiao-red{
		 z-index: 1;
		// top: 20px;
		background-image: url(../../assets/imgs/greenarrow-danger.png), url(../../assets/imgs/greenarrow-danger.png);
		background-size: auto 100%;
		background-position: 6px 50%, 50px 50%;
		background-repeat: no-repeat;
	}
	.yibiao-greenkong{
		// top: 60px;
    padding-right: 0;
    border-right: 0px solid #33CB66;
		background-image: url(../../assets/imgs/greenarrow_kong.png), url(../../assets/imgs/greenarrow_kong2.png);
		background-size: auto 100%;
   	background-position: 6px 50%, 100% 50%;
    background-repeat: no-repeat;
	}

  .navigation_box{
    margin: 0.02rem 0px 0px 0.05rem;
    font-size: 0.12rem;
  }
  .navigation_box_lat{
    margin: 0.02rem 0px 0px 0px;
    font-size: 0.13rem;
  }
  .speed_txt{
    font-size: 0.2rem;
    color: rgb(1,197,248);
    margin: 0px 0.07rem 0px 0rem;
  }
  .height_txt{
    font-size: 0.2rem;
    color: #08be15;
    margin: 0px 0.05rem 0px 0rem;
  }
  .uav_detailss_box{
    text-align: center;
    font-size: 0.13rem;
    color: #eee;
  }
  .uav_detailss_txt{
    font-size: 0.16rem;
    color: rgb(1,197,248);
    margin: 0px 0.07rem 0px 0.1rem;
    line-height: 1.5;
  }

  //右侧部分
  .control-light-layout {
    display: flex;
    // background: rgba($color: #000000, $alpha: 0.5);
    margin: 0.1rem 0px;
    text-align: left;
    border-radius: 5px;
    align-items: center;
    span {
      display: block;
      font-size: 0.15rem;
      padding: 0.1rem;
    }
    img {
      width: 20px;
      height: 20px;
      margin: 0px 0.1rem;
    }
  }
  .control_button_img{
     margin: 0px 0px 0px 0.2rem;
  }
  .parameter_list_box{
    margin: 0.1rem 0px 0rem 0.2rem;
  }
  .parameter_list_title{
    color: #0998c1;
    // margin: 0rem 0px 0.2rem;
  }
  .uav_details_right_box{
    margin:0.05rem 0px;
  }
  .uav_details_w{
    padding: 0px 0px 0px 0.15rem;
    height: 0.2rem;
    color: #eee;
  }
  .uav_details_c_right_title{
    background: rgba(255,255,255,0.3);
    height: 0.7rem;
    margin: 0px 0.05rem 0px 0px;
    color: #eee;
    display:-webkit-flex;
    Justify-content:center;  // 子元素水平居中
    align-items:center;       //子元素垂直居中
  }
  .uav_details_c_right{
    background: rgba(255,255,255,0.3);
    padding: 0px 0px 0px 0.15rem;
    height: 0.7rem;
    margin: 0px 0.05rem 0.05rem 0px;
    color: #eee;
    line-height: 1.5;
  }
  .parameter_list_txt{
    font-size: 0.13rem;
  }
  .operation_boxs_on{
    padding: 0rem 0rem 0.05rem;
  }
  .operation_boxs_down{
    padding: 0.05rem 0rem 0rem;
  }
  .operation_box{
    border-right: 2px solid #223956;
  }
  .operation_txt{
    height: 100%;
    padding: 0.15rem;
    text-align: center;
    margin: 0rem 0.05rem;
  }
  .operation_txt:hover{
    background: #08789d;
    cursor:pointer;
  }
  .operation_txt_name{
    vertical-align: middle;
     margin: 0.08rem 0rem;
  }
  .operation_img_k{
    margin-bottom:0.02rem
  }
  .operation_img{
    margin-bottom:0.04rem
  }
  .line{
    width: 100%;
    border-top: 2px solid #223956;
  }
  .flight_status_box{
    background:#86131D;
    margin: 0px 0.08rem;
    padding:0.05rem 0px;
    .uav_detailss_txt_status{
       color: #eee;
    }
  }
  .flight_status_box_true{
    margin: 0px 0.08rem;
    padding:0.05rem 0px;
  }
  .fly_image_box{
    max-height: 1.2rem;
  }



</style>
